<script setup lang="ts" name="login">
import {reactive} from "vue";
import {login, sendCode} from "@/api/member";
import {message} from 'ant-design-vue';
import {LoginParams} from "@/api/member/type";
import router from "@/router";
import useMemberStore from "@/store/modules/memberStore";

const memberStore = useMemberStore();

const loginForm = reactive<LoginParams>({
  mobile: "15663252952",
  code: ""
});

const onSendCode = async () => {
  const codeRes = await sendCode(loginForm.mobile);
  if (codeRes.success) {
    message.info(codeRes.message);
  } else {
    message.error(codeRes.message);
  }
};

const onLogin = async () => {
  const loginRes = await login(loginForm);
  if (loginRes.success) {
    message.success("登陆成功");
    console.log(loginRes.data)
    memberStore.setMember(loginRes.data);
    await router.push("/");
  } else {
    message.error(loginRes.message);
  }
};

</script>

<template>
  <div class="login-container">
    <div class="login-header">
      <h1 class="login-title">12306售票系统</h1>
    </div>
    <a-form :model="loginForm" layout="vertical" class="login-form">
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input v-model:value="loginForm.mobile" placeholder="请输入手机号"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 24 }">
        <a-input-search
            class="custom-input-search"
            v-model:value="loginForm.code"
            placeholder="请输入验证码"
        >
          <template #enterButton>
            <a-button style="height: 48px; width: 140px; color: #40a9ff" @click="onSendCode">获取验证码</a-button>
          </template>
        </a-input-search>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" block @click="onLogin">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="scss">
.custom-input-search :deep(.ant-input) {
  height: 48px; /* 设置输入框高度 */
  background-color: #f5f5f5;
}

.login-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 600px;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;

  &::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid #ffffff;
    border-right: 16px solid #ffffff;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid #ffffff;
    border-right: 16px solid #ffffff;
  }
}

.login-header {
  margin-bottom: 32px;
}

.login-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.login-form {
  .ant-form-item-label {
    text-align: right;
    color: #666666;
    font-size: 14px;
    line-height: 22px;
  }

  .ant-form-item-control-input {
    width: 100%;
  }

  .ant-input {
    height: 48px;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
    background-color: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 16px;
  }

  .ant-input-addon {
    height: 48px;
    line-height: 48px;
    color: #666666;
    font-size: 14px;
    border: 0;
    background-color: transparent;
  }

  .ant-input:focus {
    outline: none;
    border-color: #40a9ff;
  }

  .ant-form-item-explain {
    margin-top: 8px;
    color: #f5222d;
    font-size: 12px;
    line-height: 14px;
  }

  .ant-btn-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    border-radius: 4px;
    padding: 0 24px;
  }

  .ant-btn-primary:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
  }

  .ant-btn-primary:active {
    background-color: #096dd9;
    border-color: #096dd9;
  }
}
</style>
